<template>
    <transition name="fade" mode="out-in" @enter="showInner=true" @before-leave="showInner=false">
        <div v-if="visible" class="mask-view">
            <transition name="fade-scale" mode="out-in">
                <template v-if="showInner">
                    <slot></slot>
                </template>
            </transition>
        </div>
    </transition>
</template>

<script>
export default {
    name: 'MaskView',
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            showInner: false,
            // showInner: true,
        };
    },
};
</script>

<style lang="scss" scoped>
.mask-view {
    @include mmv-view-backage;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0px;
    z-index: $MaskViewZIndex;
    background: rgba($color: #000000, $alpha: 0.5);
}
</style>
